<template>
	<view class="gui-padding">
		<view class="gui-title gui-margin-top">请选择充值金额</view>
		<view class="gui-flex gui-wrap gui-space-between gui-margin-top" >
			
			<view class="grace-cz-items gui-relative" :class="[cindex == czIndex ? 'grace-cz-selected' : '']" v-for="(czitem, cindex) in items" :key="cindex" @tap="chooseItem(cindex)">
				<text v-if="czitem.promotion_slogan" class="gui-badge gui-bg-red gui-badge-absolute gui-color-white">{{czitem.promotion_slogan}}</text>
				<view :class="['grace-cz-number', cindex == czIndex ? 'gui-color-white' : '']">{{czitem.page_amount}}页</view>
				<view :class="['grace-cz-price', cindex == czIndex ? 'gui-color-white' : '']">售价 : {{czitem.recharge_amount}} 元</view>
			</view>
		</view>
		<view class="gui-margin-top">
			<button type="default" class="gui-button gui-bg-primary gui-color-white" @tap="czSubmit">充值</button>
		</view>
	</view>
</template>
<script>
export default{
	data() {
		return {
			items:[],
			czIndex : -1,
			recharge_amount:0,
			page_amount:0
		}
	},
	onShow:function(){
		this.$http.request({
			url:'recharge/index',
			method:'GET',
		}).then(res=>{
			this.items = res
		}).catch(err=>{
			console.log(err)
		})
	},
	methods:{
		chooseItem : function (index) {
			this.czIndex = index;
			this.recharge_amount = this.items[index].recharge_amount;
			this.page_amount = this.items[index].page_amount;
		},
		czSubmit : function(){
			if(this.recharge_amount == 0 ){
				uni.showToast({
					title:"请选择充值项",
					icon:"none"
				})
				return;
			}
			// 仅作为示例，非真实参数信息。
			let recharge_amount = this.recharge_amount
			let page_amount = this.page_amount
			this.$http.request({
				url:'auth.WechatPay/index',
				method:'POST',
				withToken:true,
				data:{
					recharge_amount,page_amount
				},
			}).then(payConfig=>{
				let trade_no = payConfig.trade_no
				let newBalance = uni.getStorageSync('balance') + this.page_amount
				wx.requestPayment(payConfig.config).then(res=>{
					this.$http.request({
						url:'auth.RechargeOrder/checkStatus',
						method:'POST',
						data:{
							page_amount : this.page_amount,
							trade_no : trade_no,
							new_balance:newBalance
						},
						withToken:true
					}).then(payrst => {
						//将缓存中的用户余额 + 上增加的余额
						uni.setStorageSync('balance',newBalance)
						uni.showToast({
							title:'充值成功',
							mask:true,
						})
						setTimeout(function(){
							uni.switchTab({
								url:"/pages/my/uCenter/uCenter"
							})
						},1500)
					}).catch(err=>{
						uni.showToast({
							title:err
						})
					})
				}).catch(err=>{
					console.log(err)
				})
			}).catch(err=>{
				
			})
		}
	}
}
</script>
<style>
.grace-cz-items{width:170rpx; background:#F9F9F9; padding:25rpx; border-radius:10rpx;  margin-top:25rpx;}
.grace-cz-number{width:100%; text-align:center; line-height:60rpx; font-size:32rpx; color:#5E5E5E;}
.grace-cz-selected{background-color:#F66867; color:#FFFFFF;}
.grace-cz-price{width:100%; text-align:center; line-height:36rpx; font-size:26rpx; color:#999999;}
</style>